<template>
  <div
    class="tab-nav"
    v-tab-current="{
      curIdx,
      className: 'nav-item',
      currentClassName: 'nav-current'
    }"
  >
    <item
      v-for="(item,index) of navData"
      :key="index"
      :index="index"
      :item="item"
      @changeTabIndex="changeTabIndex"
    />
  </div>
</template>

<script>
import Item from './item'

import tabCurrent from '../directives/tabCurrent'

export default {
  name: 'TabNav',
  props: {
    navData: Array,
    curIdx: Number
  },
  components: {
    Item
  },
  directives:{
    tabCurrent
  },
  methods:{
    changeTabIndex(index){
      console.log('1');
      this.$emit('changeTabIndex', index)
    }
  }
}
</script>

<style>
  .tab-nav{
    height: 50px;
    border-bottom: 1px solid #000;
  }
</style>
